<script setup lang="ts">
	import { ref, onMounted, useTemplateRef, } from 'vue';
	import * as echarts from 'echarts';
</script>

<template>
	<!-- 主页内容 -->
	<div class = 'box'>
		<!-- 主页数据部分 -->
		<div class="box_l ">
			<!-- 欢迎回来 -->
			<div class="box_l_text">
				<img src="../../img/guzhan.png"/>
				<h2>欢迎回来:{{}}</h2>
			</div>
			<!-- 热内容部分 -->
			<div class="box_l_x">
				<el-row>
					
				<!-- 线上总内容 -->
				<el-col :span ='6'  class="mixbox">
					<div class="mixbox_img">
						<img src="../../img/box1.png"/>
					</div>
					<div class="mixbox_text">
						<div class="mixbox_text_s">
							线上总内容
						</div class="mixbox_text_s">
						<div>
							<span class="booo">375.5w+</span>个
						</div>
					</div>
				</el-col>
				
				<el-col :span ='6'  class="mixbox">
					<div class="mixbox_img">
						<img src="../../img/box2.png"/>
					</div>
					<div class="mixbox_text">
						<div class="mixbox_text_s">
							线上总内容
						</div class="mixbox_text_s">
						<div>
							<span class="booo">368</span> 个
						</div>
					</div>
				</el-col>
				
				<el-col :span ='6' class="mixbox">
				<div class="mixbox_img">
					<img src="../../img/box3.png"/>
				</div>
				<div class="mixbox_text">
					<div class="mixbox_text_s">
						日增新评论
					</div class="mixbox_text_s">
					<div>
						<span class="booo">8817</span> 个
					</div>
				</div>
				</el-col>
				
				<el-col :span ='6' class="mixbox">
				<div class="mixbox_img">
					<img src="../../img/box4.png"/>
				</div>
				<div class="mixbox_text">
					<div class="mixbox_text_s">
						较昨日比较
					</div class="mixbox_text_s">
					<div>
						<span class="booo">2.8%</span> 
					</div>
				</div>
				</el-col>
			</el-row>
			</div>
		</div>
		<!-- 主体右边部分 -->
		<div class="box_r ">
			<!-- 标题部分 -->
			<div class=" box_r_title"><h2>线上热门部分</h2></div>
		</div>
	</div>
</template>

<style scoped>
/* 主体盒子设置 */
.box{
	margin:  30px 0px 0px 30px;
	display: flex;
	
}
/*  内容左边部分*/
.box_l{
	width: 1000px;
}
/* 内容图片样式 */
.box_l_text img{
	height: 30px;
	width: 30px;
	margin-right: 10px;
}
/* 内容文字样式 */
.box_l_text{
	display: flex;
	height: 30px;
	line-height: 30px;
}
/* 线上总内容部分 */
.box_l_x{
	width: 100%;
	margin-top: 50px;
}

/* 热门样式设置 */
.mixbox{
	height: 100px;
	display: flex;
	align-items: center;
}
/* 热门图片样式设置 */
.mixbox_img{
	width: 60px;
	height: 60px;
}
/* 热门文字样式设置 */
.mixbox_text{
	width: 110px;
	height: 60px;
	
}
.mixbox_text_s{
	height: 30px;
}
/* 加粗 */
.booo{
	font-size: 25px;
}

/* 内容左边部分 */
.box_r{
	width: 320px;
	
}

</style>